<template>
  <el-container class="roleContainer">
    <el-header>
      <ContentHeader
        :class="{ isActive: isCollapse }"
        @changeCollapse="changeCollapse"
        :isCollapse="isCollapse"
      />
    </el-header>

    <!-- 页面主体区 -->
    <el-container>
      <!-- 侧边栏 -->
      <Aside :isCollapse="isCollapse" @menuName="menuName"></Aside>

      <!-- 右侧内容主体 -->
      <el-main :class="{ activeMain: isCollapse }">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Aside from '@/views/Layout/asideRole/dean.vue';

export default {
  name: 'regProfessionDean',
  data() {
    return {
      isCollapse: false,
    };
  },

  components: {
    Aside,
  },

  methods: {
    // 伸缩侧边栏
    changeCollapse() {
      this.isCollapse = !this.isCollapse;
    },
  },
};
</script>

<style>
/* sm	≥768px 响应式栅格数或者栅格属性对象 */
@media screen and (max-width: 768px) {
  /* 头部左侧栏收缩不见 */
  .header_left {
    left: 0;
    box-shadow: none !important;
  }

  /* 主体部分布满全屏 */
  .el-main {
    left: 0 !important;
  }

  /* 头部右侧栏宽度100% */
  .header_right {
    left: 0 !important;
  }

  /* 主体部分头部栏宽度100% */
  /* .mainHeader {
    width: calc(100vw - 40px) !important;
  } */
}
</style>

<style lang="less">
.roleContainer {
  height: 100%;

  // 头部导航栏
  .el-header {
    position: relative;
    width: 100%;
    z-index: 999;
  }

  // 主体部分
  .el-main {
    background-color: #f3f3f4;
    position: absolute;
    left: 220px;
    right: 0;
    top: 60px;
    bottom: 0;
    padding: 0;
    transition: all 0.5s;

    // &::-webkit-scrollbar {
    //   display: none;
    // }
  }

  .activeMain {
    left: 64px !important;
  }
}
</style>
